<template>
  
  <div class="login">
    <h2><img class="login_img" src="../../../../public/uugai.com_1608277411290.png" alt=""></h2>
    <van-form @submit="onSubmit">
      <van-field
        v-model="mbForm.username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="mbForm.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" @click="logins">
          登录
        </van-button>
      </div>
      <div style="margin: 16px">
        <van-button round block type="info" @click="register"> 没有账号点击注册 </van-button>
      </div>
    </van-form>
    
    <img src="./img/icon.png" class="icon" @click="goLogins"/>
    <div class="content">
      登录即同意<span>《中国移动认证服务器条款》</span>和美恰智慧医疗
      <span>用户协议</span>以及<span>隐私政策</span>
    </div>
  </div>
</template>

<script>
import {loginMb} from '../../../api/login'
export default {
  name: "login",
  data() {
    return {
      mbForm:{
         username: "",
         password: "",
      }
    };
  },
  created(){
    // this.losgins();
  //  this.resizeBy();
  //  axios.get('https://api.apishop.net/common/verify/getSimpleVerifyImage',{
  //    params:{
  //      apiKey:'aY7jT6Z81fdfb5bf51e1c45c9d4575fb609c81a9156fb01',
  //      codeType:5
  //    }
  //  }).then(res=>{
  //    console.log(res)
  //  })
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    async losgins(){
      await axios.post('http://10.4.196.7:8101/patient/login',{
          username:'alc',
          password:'123456',
          mode:3
      }).then(res =>{
        console.log(res)
      })
    },
    async resizeBy(){
      await axios.put('http://10.4.196.7:8101/patient/changeIntegral?id=3&integral=123').then(res =>{
        console.log(res)
      })
    },
    logins() {
      if (this.mbForm) {
        
        loginMb(this.mbForm).then(res=>{
          console.log(res.data.data)
          //判断是否登录成功
          if(res.data.code!==200) return this.$message.error('登录失败')
          //本地存储一波
          localStorage.setItem('patient_token', res.data.data.token)
          localStorage.setItem('patient_user', JSON.stringify(res.data.data))
          localStorage.setItem('patient_id', res.data.data.id);
          //  移动端vuex 使用一波
          this.$store.commit('patientStore/SET_PATIENT_TOKEN', res.data.token)
          this.$store.commit('patientStore/SET_PATIENT_STATUS', true)
          //判断个人中心显示
          sessionStorage.setItem('username',res.data.data.username)
          // console.log(this.$route.query.backUrl)
          this.$router.push('/home/mine')
        })
      } else {
        this.$message.error('账号和密码不能为空')
      }
    },
    register(){
      this.$router.push('/register')
    },
    goLogins(){
      this.$router.push('/logins')
    }
  },
};
</script>

<style> 
.login {
  width: 96%;
  height: 100%;
  margin:0 auto;
}
h2 {
  width: 100%;
}
.login_img{
  width: 100%;
}
.icon{
  position: fixed;
  bottom: 100px;
  left: 155px;
}
.content{
  font-size: 18px;
  position: fixed;
  bottom: 30px;
  left: 10px;
  right: 10px;
  text-align: center;
}
.content span{
  color:  #87C9FE;
}

</style>
